import { RouterView, createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'
import { h } from 'vue'
// 路由懒加载
const Layout = () =>
    import ('@/views/Layout')
const Home = () =>
    import ('@/views/home')
const TopCategory = () =>
    import ('@/views/category/index')
const SubCategory = () =>
    import ('@/views/category/SubCategory')
const Goods = () =>
    import ('@/views/goods')
const Login = () =>
    import ('@/views/login')
const PayCheckOut = () =>
    import ('@/views/pay/checkout')
const Pay = () =>
    import ('@/views/pay/index')
const PayResult = () =>
    import ('@/views/pay/result')
const MemberLayout = () =>
    import ('@/views/member/Layout')
const MemberHome = () =>
    import ('@/views/member/home')
const MemberOrder = () =>
    import ('@/views/member/order')
const MemberOrderDetail = () =>
    import ('@/views/member/order/detail')
const routes = [{
        path: '/',
        component: Layout,
        children: [{
                path: '/',
                component: Home
            },
            {
                path: '/category/:id',
                component: TopCategory
            },
            {
                path: '/category/sub/:id',
                component: SubCategory
            },
            {
                path: '/product/:id',
                component: Goods
            },
            {
                path: '/cart',
                component: () =>
                    import ('@/views/cart')
            },
            {
                path: '/member/checkout',
                component: PayCheckOut
            },
            {
                path: '/member/pay',
                component: Pay
            },
            {
                path: '/pay/callback',
                component: PayResult
            },
            {
                path: '/member',
                component: MemberLayout,
                children: [{
                        path: '/member',
                        component: MemberHome
                    },
                    {
                        path: '/member/order',
                        component: {
                            render: () => h( < RouterView / > )
                        },
                        children: [{
                                path: '',
                                component: MemberOrder
                            },
                            {
                                path: '/member/order/:id',
                                component: MemberOrderDetail
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        path: '/login',
        component: Login
    }
]

const router = createRouter({
        history: createWebHashHistory(),
        routes,
        // 每次切换路由时滚动到页面顶部
        scrollBehavior() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({ left: 0, top: 0 })
                }, 500)
            })
        }
    })
    // 前置路由导航守卫
router.beforeEach((to, form, next) => {
    const { profile } = store.state.user
    if (!profile.token && to.path.startsWith('/member')) {
        return next('/login?redirectUrl=' + encodeURIComponent(to.fullPath))
    }
    next()
})
export default router